// @ts-nocheck
import prompt from '@system.prompt';
import { pinyin } from 'pinyin-pro';
export default {
    data: {
        LETTERLIST: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        myMailList: {},//新的通讯录数组
        initials: [], // 通讯录中包含的首字符
        currentInitials: 'A', // 当前选中字母
        currentItemTop: 0, // 当前字母的top值
        showBubble: false, // 是否展示左侧大的选中字母
        timerBubble: '', // 选中字母的定时器
        timerSpringback: '', // 回弹字母的定时器
        LETTERWIDTH: 26, // 右侧导航字母宽度
        poinList: [], // 每一块字母底部所在位置
        initialsScrollY: 0, // 第一个字母距离顶部的y轴位置
        BTNWIDTH: 80, // 按钮固定宽度
        isBtnOpen: false, // 按钮是否打开状态
        leftBtnPo: 0, // 左边按钮的定位
        rigthBtnPo: 0, // 右边按钮的定位
        infoPo: 0, // 中间内容的定位
        showBtnType: '', // 滑动的类型，left:左滑动 rigth：右滑动
        leftBtnWidth: 0, // 左边按钮的宽度
        rigthBtnWidth: 0,// 右边按钮的宽度
        poinTouchstart: {}, // 手指触摸时的坐标点,单个通讯录
        currentItemId: '', // 当前手指开始时，所在的元素id
        prevItemId: '', // 上一次手指开始时，所在的元素id
        isMove: false, // 是否移动,
        timerAnimationBtn: '', // 按钮回弹动画
    },
    props: {
        mailList: {
            default: [],
            type: Array
        },
        leftBtnList: {
            default: [],
            type: Array
        },
        rigthBtnList: {
            default: [],
            type: Array
        },
//  滚动边缘效果：spring：弹性物理动效；fade：渐隐物理动效；none：无效果
        overscrollEffect: {
            default: "none",
            type: String
        },
        isShowLetter: {// 是否展示索引
            default: true,
            type: Boolean
        },
        distanceTopHeigth: {// 距离顶部的位置
            default: 0,
            type: Number
        }
    },
    myInit() {
        console.log("初始化" + JSON.stringify(this.mailList));
        this._init(); // 初始化位置
        this._setMailList();// 按照数据首字母规则排序
        this._setInitialClass(this.initials[0]);// 跳转到对应的字母列表中
    },
//    跳转到对应的字母列表中
    linkInitial(event, isSpringback = true, index) {
        this._setInitialClass(event);
        this._setBubble();
        this.$element("mail_list").scrollTo(
            {
                position: this.poinList[index - 1],
                duration: 200,
                timingFunction: 'ease-out'
            }
        );
        clearInterval(this.timerSpringback);
//        点击最低部，可反弹到当前字母列表
        if (isSpringback) {
            this.timerSpringback = setTimeout(() => {
                this.letterTouchmove();
            }, 300)
        }
    },
//    点击列表和左右按钮事件
    clickHandle(item, type, btn) {
        if (type === 'info') {
            this.$emit("clickInfo", item);
            prompt.showToast({
                message: `点击了${item.title}`,
                duration: 1000,
            });
        } else if (type === 'left') {
            this.$emit("clickBtn", item, type, btn);
            prompt.showToast({
                message: `点击了${btn.name}`,
                duration: 1000,
            });
        } else if (type === 'rigth') {
            this.$emit("clickBtn", item, type, btn);
            prompt.showToast({
                message: `点击了${btn.name}`,
                duration: 1000,
            });
        }
    },
//    手指刚触摸屏幕时触发该事件，每个列表的事件
    mailItemTouchstart(event) {
//        如果没有左右按钮则跳出
        if (this.leftBtnList.length === 0 && this.rigthBtnList.length === 0) {
            return false;
        }
        console.log(`手指触摸 ${JSON.stringify(event)}`)
        this.poinTouchstart = event.touches[0];
        this.isMove = false;
        if (this.showBtnType === 'leftOpen' || this.showBtnType === 'rigthOpen') {
            this.isBtnOpen = true;
        } else {
            this.isBtnOpen = false;
        }
    },
//    手指触摸屏幕后移动时触发该事件，每个列表的事件
    mailItemTouchmove(event) {
//        如果没有左右按钮则跳出
        if (this.leftBtnList.length === 0 && this.rigthBtnList.length === 0) {
            return false;
        }
        const currentPoin = event.touches[0];// 保存移动时候的点坐标
        const slideWidth = Math.abs(currentPoin.localX - this.poinTouchstart.localX); // 移动滑动的距离
//        已经存在状态，更新上一个id
        if (this.showBtnType) {
            this.prevItemId = this.currentItemId;
        }
//        定义当前id
        const currentItemId = event.target.id;
        console.log(`当前id：${currentItemId}。上一个id： ${this.prevItemId}` )
//        上一次和本次滑动的不是同一个，更新上一个id
        if (this.prevItemId !== '' && this.prevItemId !== currentItemId) {
            this.prevItemId = currentItemId;
            return false;
        }
//        更新当前id
        this.currentItemId = currentItemId;
//        如果左右滑动距离大于上下滑动距离，定义为左右滑动，否则视为上下滑动
        console.log(`初始x：${this.poinTouchstart.localX} 、当前x: ${currentPoin.localX} `)
        if (Math.abs(currentPoin.localX - this.poinTouchstart.localX) < Math.abs(currentPoin.localY - this.poinTouchstart.localY)) {
//            上下滑动
            console.log(`上下滑动`)
            return false;
        }
        console.log(`左右滑动`);
//        如果滚动宽度小于设定值，则返回
        if (slideWidth < 40) {
            return false;
        }
        this.isMove = true;
        console.log(`滚动的宽度：${slideWidth} 、滚动的类型：${this.showBtnType}`);
//        当前坐标大于初始坐标，则右滑动（左边按钮出现），否则左滑动（右边按钮出现）
        if (currentPoin.localX > this.poinTouchstart.localX) {
            if (this.showBtnType === "leftOpen" && this.isBtnOpen) {
                return false;
            }
            if (this.showBtnType === '' || this.showBtnType === 'leftOpen') {
                this.showBtnType = 'leftOpen';
            } else {
                this.showBtnType = 'rigthClone';
            }
        } else {
            if (this.showBtnType === "rigthOpen" && this.isBtnOpen) {
                return false;
            }
            if (this.showBtnType === '' || this.showBtnType === 'rigthOpen') {
                this.showBtnType = 'rigthOpen';
            } else {
                this.showBtnType = 'leftClone';
            }
        }
        this._setMovePoBtn(slideWidth);
    },
//    手指触摸结束离开屏幕时触发该事件，每个列表的事件
    mailItemTouchend(event) {
//        如果没有左右按钮则跳出
        if (this.leftBtnList.length === 0 && this.rigthBtnList.length === 0) {
            return false;
        }
        if (!this.showBtnType) return false;
        console.log(`手指离开 + ${JSON.stringify(event)}`);
        let isClose = false; // 是否关闭
        if (this.showBtnType === '') {
            return false;
        }
        if (!this.isMove) {
            this.isMove = false;
            isClose = true;
        }
        this._setLeavePoBtn(this.showBtnType, isClose);
    },
//    手指触摸屏幕后移动时触发该事件，通讯录滑动
    letterTouchmove() {
        if (!this.isShowLetter) {
            return false;
        }
        const currentItemOnePoinY = this.$element(`initials${this.currentInitials}`).getBoundingClientRect().top - this.distanceTopHeigth;
        this.currentItemTop = -currentItemOnePoinY;
        let currentPoinY = this.$element('mail_list').getScrollOffset().y + 1;
        this.poinList.forEach((item, index) => {
            const prev = index > 0 ? this.poinList[index - 1] : -1;
            if (currentPoinY < item && currentPoinY > prev && currentPoinY) {
                this._setInitialClass(this.initials[index]);
            }
        })
    },
//    手指触摸屏幕后结束时触发该事件，通讯录滑动
    letterTouchend() {
        if (!this.isShowLetter) {
            return false;
        }
        setTimeout(() => {
            const currentItemOnePoinY = this.$element(`mail_list_item_${this.currentInitials}_0`).getBoundingClientRect().top;
            this.currentItemTop = -currentItemOnePoinY + this.distanceTopHeigth;
        }, 0)
    },
//    手指触摸屏幕后移动时触发该事件，字母列表滑动
    itemInitialsTouchmove(event) {
        const currentPoin = event.touches[0];
        const currentItemToAHeight = currentPoin.globalY - this.initialsScrollY;
        let index = Math.floor(currentItemToAHeight / this.LETTERWIDTH);
        index = index > this.initials.length - 1 ? this.initials.length - 1 : (index < 0 ? 0 : index);
        this.linkInitial(this.initials[index], false, index);
    },
//    手指触摸结束离开屏幕时触发该事件，字母列表滑动
    itemInitialsTouchend() {
        this.timerSpringback = setTimeout(() => {
            this.letterTouchmove();
        }, 300)
    },
// 定位初始化
    _init() {
        this.leftBtnWidth = this.BTNWIDTH * this.leftBtnList.length; // 左边按钮的宽度
        this.rigthBtnWidth = this.BTNWIDTH * this.rigthBtnList.length; // 右边按钮的宽度
        this.leftBtnPo = -this.leftBtnWidth;// 左边按钮的定位
        this.rigthBtnPo = -this.rigthBtnWidth;// 右边按钮的定位
        this.$element("mail_list").scrollTo(
            {
                position: 0,
                duration: 1,
                timingFunction: 'ease-out'
            }
        );
        setTimeout(() => {
            this.currentItemTop = 0;
        }, 0)
    },
//    按照数据首字母规则排序
    _setMailList() {
//        清空数组
        this.$set('myMailList', {});
        this.$set('initials', []);
        if (!this.isShowLetter) {
            this.initials.push("A");
            this.$set('myMailList.A', this.mailList);
            this._setPoinList(); // 设置每一块字母底部所在位置列表
            return false;
        }
        let isIncludesElse = false; // 是否包含字母外的
        this.mailList.forEach(item => {
            const f_name = item.title.slice(0,1);
            let itemInitials = pinyin(f_name, { toneType: 'none' }).slice(0,1).toLocaleUpperCase();
//            是否不属于字母
            if (!this.LETTERLIST.includes(itemInitials)) {
                itemInitials = '#';
                isIncludesElse = true;
            }
//            是否已包含此首字母
            const isFlag = this.initials.includes(itemInitials);
            if (!isFlag) {
//               不存在此首字母，初始化list字母数组,首字母数组新增数据
                this.$set('myMailList.'+itemInitials, [])
                this.initials.push(itemInitials);
            }
            this.myMailList[itemInitials].push(item);
        })
        //        根据字母进行排序
        this.initials.sort((a, b) => {
            return a.charCodeAt() - b.charCodeAt();
        })
//        如果有#,则将#放到最后一位
        if (isIncludesElse) {
            const value = this.initials.shift();
            this.initials.push(value);
        }
        this.currentInitials = this.initials[0];
//        获取第一个字母距离屏幕顶部的距离
        setTimeout(() => {
            this.initialsScrollY = this.$element(`initials_scroll_${this.initials[0]}`).getBoundingClientRect().top;// 第一个字母距离顶部的y轴位置
        }, 1000)
        this._setPoinList(); // 设置每一块字母底部所在位置列表
    },
//    设置选中字母class
    _setInitialClass(initials) {
        this.currentInitials = initials;
    },
//    设置每一块字母底部所在位置列表
    _setPoinList() {
        const poinList = [];
        this.initials.forEach((item, index) => {
            const prev = index > 0 ? poinList[index - 1] : 0;
            poinList.push(40 + this.myMailList[item].length * 80 + prev);
        })
        this.poinList = poinList;
    },
//    设置字母气泡
    _setBubble() {
        this.showBubble = true;
        clearTimeout(this.timerBubble);
        this.timerBubble = setTimeout(() => {
            this.showBubble = false;
        }, 1000)
    },
//    手指一直未离开时，设置左右移动的状态和移动的距离
    _setMovePoBtn(slideWidth) {
        slideWidth -= 40;
        const leftWidth = this.leftBtnWidth;
        const rigthWidth = this.rigthBtnWidth;
        if (this.showBtnType === 'leftOpen') {
            this.leftBtnPo = slideWidth > leftWidth ? 0 : -leftWidth + slideWidth;
            this.infoPo = slideWidth > leftWidth ? leftWidth : slideWidth;
        } else if (this.showBtnType === 'leftClone') {
            this.leftBtnPo = slideWidth > leftWidth ? -leftWidth : -slideWidth;
            this.infoPo = slideWidth > leftWidth ? 0 : leftWidth - slideWidth;
        } else if (this.showBtnType === 'rigthOpen') {
            this.rigthBtnPo = slideWidth > rigthWidth ? 0 : -rigthWidth + slideWidth;
            this.infoPo = slideWidth > rigthWidth ? -rigthWidth : -slideWidth;
        } else if (this.showBtnType === 'rigthClone') {
            this.rigthBtnPo = slideWidth > rigthWidth ? -rigthWidth : -slideWidth;
            this.infoPo = slideWidth > rigthWidth ? 0 : -rigthWidth + slideWidth;
        }
        console.log(`滚动类型 ：${this.showBtnType} 、left: ${this.leftBtnPo} 、rigth: ${this.rigthBtnPo} 、info:" ${this.infoPo}`)
    },
//    手指离开后，设置左右按钮状态
    _setLeavePoBtn(type, isClose) {
        type = type.indexOf('left') !== -1 ? 'left' : 'rigth';
        console.log(`类型===${type}`);
        if (this[`${type}BtnWidth`] - Math.abs(this[`${type}BtnPo`]) < (this[`${type}BtnWidth`] / 2) || isClose) {
            console.log("收起+" + type)
            this._animationBtn(type, true, 0, -this[`${type}BtnWidth`])
            this.showBtnType = '';
        } else {
            const infoPo = type === 'left' ? this[`${type}BtnWidth`] : -this[`${type}BtnWidth`];
            this._animationBtn(type, false, infoPo, 0)
        }
    },
//    手指离开后，左右按钮展开或者收起的动画
    _animationBtn(type, isClose, info, typeNum) {
        console.log("动画属性：" + type + isClose + info + typeNum);
        this.timerAnimationBtn = setInterval(() => {
            if (type === 'left' ) {
                if (isClose) {
                    this[`${type}BtnPo`] -= 20;
                    this.infoPo -= 20;
                    if (this.infoPo < info || this.infoPo === 0) {
                        this[`${type}BtnPo`] = typeNum;
                        this.infoPo = info;
                        clearInterval(this.timerAnimationBtn);
                    }
                } else {
                    this[`${type}BtnPo`] += 20;
                    this.infoPo += 20;
                    if (this.infoPo > info || this.infoPo === 0) {
                        this[`${type}BtnPo`] = typeNum;
                        this.infoPo = info;
                        clearInterval(this.timerAnimationBtn);
                    }
                }

            } else {
                if (isClose) {
                    this[`${type}BtnPo`] -= 20;
                    this.infoPo += 20;
                    if (this.infoPo > info || this.infoPo === 0) {
                        this[`${type}BtnPo`] = typeNum;
                        this.infoPo = info;
                        clearInterval(this.timerAnimationBtn);
                    }
                } else {
                    this[`${type}BtnPo`] += 20;
                    this.infoPo -= 20;
                    if (this.infoPo < info || this.infoPo === 0) {
                        this[`${type}BtnPo`] = typeNum;
                        this.infoPo = info;
                        clearInterval(this.timerAnimationBtn);
                    }
                }
            }
        }, 30)
    }
}
